<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>checkbox_radio</title>
    <style type="text/css">
    /*“+”代表选中该元素后一个兄弟元素，“：checked”表示选中状态。*/
    
    .chk {
        display: none;
    }
    
    .chk + label {
        position: relative;
    }
    
    .chk + label:before {
        content: "";
        position: relative;
        background-color: #fff;
        border: 1px solid #c1caca;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 9px;
        border-radius: 5px;
        display: inline-block;
        margin-right: 10px;
        vertical-align: top;
    }
    
    .chk:checked + label:before {
        background-color: #ecf2f7;
        border: 1px solid #92a1ac;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    }
    .chk:checked + label:after {
    	content: "\2714";
    	position: absolute;
    	top: -7px;
    	left: 2px;
    	color: #758794;
    	font-size: 1.4em;
    	vertical-align: text-top;
    }
    </style>
</head>

<body>
    <input type="checkbox" name="" id="checkbox1" class="chk" checked="checked">
    <label for="checkbox1">选项1</label>
    <input type="checkbox" name="" id="checkbox2" class="chk">
    <label for="checkbox2">选项2</label>
</body>

</html>
